<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
	<html>
	<head>
		<title><xsl:value-of select="search/@brand"/> Search Result </title>
		<style type="text/css">
			h1 { font-family:Sans-serif; }
			table.models {
				font-family:Sans-serif;
				font-size: 13px;
				font-style: bold;
				border-width: 1px;
				border-style: groove;
			}
			table.camera {
				font-family:Sans-serif;
				font-size: 13px;
				color: #dfdddd;
				border-width: 3px;
				border-style: groove;
				background-color: #333333;
			}
			td {
				padding: 2px 5px 2px 5px;
			}
			.someClass tr td
			{
				border-top: 1px solid red;
				border-bottom: 1px solid red;
			}
		</style>
	</head>
	<body bgcolor="#aaaaaa">
	<div align="center">
		
		<xsl:apply-templates select="search"/>	
	
		<br /><br />
		<xsl:apply-templates select="search/camera"/>
		

	</div>
	</body>
	</html>
</xsl:template>

<!-- template aplicado ao elemento search (mostra o cabecalho e a lista de modelos) -->
<xsl:template match="search">
	<!-- adiciona referencia para voltar ao topo -->
	<a name="#topo" />
	
	<!-- imprime o nome da marca correspondente a pesquisa -->
	<h1> Search Result of <span style="color: white"><xsl:value-of select="@brand"/></span> Cameras </h1>
	<table class="models" width="400px">
		<tr>
		<td align="left" width="200px">Select a model</td>
		<td align="right">
			<select onChange="window.top.location = this.options[this.selectedIndex].value">
			
				<!-- adiciona cada umas das cameras ao drop down menu -->
				<xsl:for-each select="camera">
				<xsl:variable name="mod" select="@model" />
				<option value="#{$mod}">
					<xsl:value-of select="$mod" />
				</option>
				</xsl:for-each>
			</select>
		</td></tr>
	</table>
</xsl:template>

<!-- template aplicado aos elementos camera.
	 mostra as caracteristicas pesquisadas -->
<xsl:template match="camera">
	<xsl:variable name="mod" select="@model" />
	<xsl:variable name="img_link" select="image_link" />
	
	<!-- adiciona referencia para aceder atraves do drop down menu -->
	<a name="{$mod}" />
	
	
	<table width="500px" class="camera">
	
	<!-- mostra o modelo e a foto da camera -->
	<tr>
		<td width="180" align="center"> <b> <xsl:value-of select="$mod"/> </b></td>
		<td width="320" align="center"><img src="{$img_link}" /></td>
	</tr>

	<!-- verifica se o elemento description esta vazio. se for o caso nao apresenta a linha correspondente -->
	<xsl:if test="description[normalize-space()]">
		<tr>
			<td>Description</td>
			<td><div align="justify"><xsl:value-of select="description" /></div></td>
		</tr>		
	</xsl:if>
	
	<!-- verifica se o elemento announced esta vazio. se for o caso nao apresenta a linha correspondente -->
	<xsl:if test="announced[normalize-space()]">
		<tr>
			<td>Date of Announcement</td>
			<td><xsl:value-of select="announced" /></td>
		</tr>
	</xsl:if>
	
	<!-- verifica se o elemento max_resolution tem filhos. se nao tiver significa que os
		 dados nao estavam disponiveis e por isso nao apresenta a linha correspondente -->
	<xsl:if test="max_resolution/*">
		<tr>
			<td>Max Resolution</td>
			<td>
			<xsl:value-of select="max_resolution/width" /> x <xsl:value-of select="max_resolution/height" />
			</td>
		</tr>
	</xsl:if>

	<!-- verifica se o elemento lower_resolutions tem filhos res. se nao tiver significa que os
		 dados nao estavam disponiveis e por isso nao apresenta a linha correspondente -->
	<xsl:if test="lower_resolutions/res">
		<tr>
			<td>Lower Resolutions</td>
			<td>
				<xsl:for-each select="lower_resolutions/res">
					 <xsl:value-of select="width"/> x <xsl:value-of select="height"/>
					 <br />
				</xsl:for-each>
			</td>
		</tr>
	</xsl:if>
	
	<!-- verifica se o elemento image_ratio tem filhos ratio. se nao tiver significa que os
		 dados nao estavam disponiveis e por isso nao apresenta a linha correspondente -->
	<xsl:if test="image_ratio/ratio">
	<tr>
		<td>Image Ratio</td>
		<td>
			<xsl:for-each select="image_ratio/ratio">
				 <xsl:value-of select="width"/> x <xsl:value-of select="height"/>
				 <br />
			</xsl:for-each>
		</td>
	</tr>
	</xsl:if>
	
	<!-- verifica se o elemento effective_pixels esta vazio. se for o caso nao apresenta a linha correspondente -->
	<xsl:if test="effective_pixels[normalize-space()]">
		<tr>
			<td>Effective Pixels</td>
			<td><xsl:value-of select="effective_pixels" /></td>
		</tr>
	</xsl:if>
	
	<!-- verifica se o elemento sensor_size tem filhos. se nao tiver significa que os
		 dados nao estavam disponiveis e por isso nao apresenta a linha correspondente -->
	<xsl:if test="sensor_size/*">
		<tr>
			<td>Sensor size</td>
			<td>
			<!-- se um dos filhos nao tiver valor atribuido nao e apresentado -->
			<xsl:if test="count(sensor_size/width) &gt; 0">
				<xsl:value-of select="sensor_size/width" /> x <xsl:value-of select="sensor_size/height" /> mm; 
			</xsl:if>
			
			<xsl:if test="count(sensor_size/fraction) &gt; 0">
				<xsl:value-of select="sensor_size/fraction" /> "; 
			</xsl:if>
			
			<xsl:if test="count(sensor_size/area) &gt; 0">
				<xsl:value-of select="sensor_size/area" /> cm2
			</xsl:if>
			</td>
		</tr>
	</xsl:if>
	
	<!-- verifica se o elemento iso_rating tem filhos. se nao tiver significa que os
		 dados nao estavam disponiveis e por isso nao apresenta a linha correspondente -->
	<xsl:if test="iso_rating/*">
		<tr>
		<td>ISO Rating</td>
		<td>
			<xsl:variable name="n_iso_rating" select="count(iso_rating/iso)" />
			<xsl:for-each select="iso_rating/iso">
				<xsl:value-of select="." />
				
				<xsl:variable name="current" select="position()"/>
				<!-- apenas imprime virgula se nao for o ultimo elemento -->
				<xsl:if test="$current != $n_iso_rating">, </xsl:if>
			</xsl:for-each>
		</td>
		</tr>
	</xsl:if>

	<!-- verifica se o elemento shutter tem filhos. se nao tiver significa que os
		 dados nao estavam disponiveis e por isso nao apresenta a linha correspondente -->
	<xsl:if test="shutter/*">
		<tr>
		<td>Shutter Speed</td>
		<td>
			Min: <xsl:value-of select="shutter/min" /><br />
			Max: <xsl:value-of select="shutter/max" />
		</td>
		</tr>
	</xsl:if>
	
	<!-- verifica se o elemento review_link esta vazio. se for o caso nao apresenta a linha correspondente -->
	<xsl:if test="review_link[normalize-space()]">
		<tr>
			<xsl:variable name="review_link" select="review_link" />
			<td></td>
			<td><a href="{$review_link}" target="_blank"><b><span style="color:green">In Depth Review</span></b></a></td>
		</tr>
	</xsl:if>
	<tr>
	<td></td>
	<td><div align="right"><a href="#topo">Back to top</a></div></td>
	</tr>
	
	</table>
	<br />
</xsl:template>

</xsl:stylesheet>